<template>
    <div class="flex space-x-8" style="box-sizing: border-box">
        <div class="lg:w-2/6 ">
            <el-card style="min-height: 100%;width: 324px" class="fixed">
                <p style="font-size: 18px;font-weight: 500;text-align: center;margin: 5px 0">目录</p>
                <MdCatalog :editorId="id" :scrollElement="scrollElement"/>
            </el-card>
        </div>
        <!-- 文章主体 -->
        <article class="lg:w-4/6">
            <el-backtop :right="100" :bottom="100"/>
            <el-card shadow="hover" class="mb-6">
                <!-- 文章头部 -->
                <template #header>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <el-tag type="info" size="small">前端开发</el-tag>
                            <span class="mx-2 text-gray-400">•</span>
                            <span class="text-gray-600 text-sm">{{ formatTime(article.createTime) }}</span>
                            <span class="mx-2 text-gray-400">•</span>
                            <div class="flex items-center text-gray-600 text-sm">
<!--                                <i class="fa fa-eye mr-1"></i>-->
                                <svg t="1752540536639"
                                     class="icon fa fa-eye mr-1"
                                     viewBox="0 0 1024 1024"
                                     version="1.1"
                                     xmlns="http://www.w3.org/2000/svg"
                                     p-id="895"
                                     width="25" height="25">
                                    <path d="M512.3 276.9c-228.4 0-374 178.5-393.8 255.9 19.3 78.2 165.5 256 393.8 256s373.8-176.5 393.9-256c-19.7-78.2-165.6-255.9-393.9-255.9z m0 452.9c-182.3 0-303.2-131.1-331.5-196.7C209.6 467.4 331.2 336 512.3 336c181.9 0 303 131.2 331.5 196.9-28.6 65.6-149.8 196.9-331.5 196.9z" fill="#666666" p-id="896"></path><path d="M512.3 434.4c-54.4 0-98.4 44.1-98.4 98.5s44.1 98.4 98.4 98.4c54.4 0 98.5-44.1 98.5-98.4 0-54.4-44.1-98.5-98.5-98.5z m0 137.9c-21.7 0-39.4-17.7-39.4-39.4s17.6-39.4 39.4-39.4 39.4 17.7 39.4 39.4-17.7 39.4-39.4 39.4z" fill="#666666" p-id="897"></path></svg>
                                {{ article.viewCount }}</div>
                            <ArticleViewTracker :articleId="articleId"/>
                        </div>
<!--                        <el-button type="primary" link >收藏</el-button>-->
<!--                        <el-space>-->
<!--                            <LikeButton :post-id="articleId"/>-->
<!--                            <CollectButton :post-id="articleId"/>-->
<!--                        </el-space>-->
                    </div>
                </template>

                <h1 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-gray-900 leading-tight mb-6">
                    {{ article.title }}</h1>

                <div class="flex items-center mb-8">
                    <el-avatar :size="40" :src="author.avatarUrl"></el-avatar>
                    <div class="ml-3">
                        <div class="font-medium text-gray-900">{{ author.userAccount }}</div>
                        <div class="text-sm text-gray-600">{{ author.userName }}</div>
                    </div>
                    <el-button type="primary" size="small" class="ml-auto">关注</el-button>
                </div>
                <el-watermark
                        :font="config.font"
                        :content="author.userAccount"
                >
                    <!-- 文章内容 -->
                    <MdPreview :id="id" :modelValue="article.content"/>
                </el-watermark>
                <!-- 文章标签 -->
                <div class="mt-10 pt-6 border-t flex">
                    <el-space>

                    </el-space>
                    <div class="flex flex-wrap gap-2 items-center">
                        <span class="text-sm font-medium text-gray-500">标签：</span>
                        <el-tag v-for="tag in article.tags" :key="tag" size="small" effect="light">{{ tag }}
                        </el-tag>
                    </div>
                    <div class="flex flex-wrap gap-4 items-center justify-end flex-1">
                        <LikeButton :post-id="articleId"/>
                        <CollectButton :post-id="articleId"/>
                    </div>
                </div>
            </el-card>
<!--        <commen/>-->
        </article>
        <!-- 侧边栏 -->
        <aside class=" lg:w-2/6 space-y-6">
            <!-- 作者信息卡片 -->
            <el-card shadow="hover">
                <div class="text-center p-6">
                    <el-avatar :size="80" :src="author.avatarUrl" class="mb-4"></el-avatar>
                    <h3 class="text-center font-semibold text-lg">{{ author.userAccount }}</h3>
                    <p class="text-center text-gray-500 text-sm mb-4">{{ author.userName }}</p>
                    <el-button type="primary" class="w-full">关注作者</el-button>
                </div>
                <div class="grid grid-cols-3 border-t">
                    <div class="p-4 text-center">
                        <div class="font-semibold text-gray-900">{{ author.articleCount || 20 }}</div>
                        <div class="text-xs text-gray-500">文章</div>
                    </div>
                    <div class="p-4 text-center border-x">
                        <div class="font-semibold text-gray-900">{{ author.followerCount || 50}}</div>
                        <div class="text-xs text-gray-500">粉丝</div>
                    </div>
                    <div class="p-4 text-center">
                        <div class="font-semibold text-gray-900">{{ author.likeCount || 2 }}</div>
                        <div class="text-xs text-gray-500">获赞</div>
                    </div>
                </div>
            </el-card>

            <!-- 相关文章 -->
            <el-card shadow="hover">
                <template #header>
                    <div class="flex justify-between items-center">
                        <h3 class="font-semibold">相关推荐</h3>
                        <el-button link type="primary" size="small">更多</el-button>
                    </div>
                </template>
            </el-card>

            <!-- 标签云 -->
            <el-card shadow="hover">
                <template #header>
                    <h3 class="font-semibold">热门标签</h3>
                </template>
                <div class="p-4 flex flex-wrap gap-2">
                    <el-tag
                            v-for="tag in hotTags"
                            :key="tag.name"
                            :size="tag.size"
                            :type="tag.type"
                            @click="filterByTag(tag.name)">
                        {{ tag.name }}
                    </el-tag>
                </div>
            </el-card>
        </aside>
    </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {useRoute} from "vue-router";
import {ElMessage} from "element-plus";
import myAxios from "@/axios/axios.js";
import {MdCatalog, MdPreview} from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';
import ArticleViewTracker from "@/components/ArticleViewTracker.vue";
import LikeButton from "@/components/LikeButton.vue";
import CollectButton from "@/components/CollectButton.vue";

const route = useRoute();
const articleId = route.params.id;
const article = ref({});
const author = ref({});
const isLoading = ref(true); // 新增加载状态

const id = 'preview-only';
const scrollElement = document.documentElement;

onMounted(() => {
    fetchArticleDetail();
});
const fetchArticleDetail = async () => {
    try {
        const res = await myAxios.get(`/article/get/${articleId}`); // 使用模板字符串正确拼接参数
        console.log(res)
        if (res.code === 0 && res.data) {
            article.value = res.data;
            author.value = res.data.user;
        } else {
            ElMessage.error('获取文章详情失败，' + res.data.message);
        }
    } catch (error) {
        ElMessage.error('请求出错，请重试');
        console.error(error); // 输出错误日志以便调试
    } finally {
        isLoading.value = false; // 不论成功与否，最终设置为加载完成
    }
};
const config = reactive({
    font: {
        fontSize: 16,
        color: 'rgba(0,0,0,0.15)'
    }
})
// 点赞状态
const isLiked = ref(false);
const likeCount = ref(article.value.likeCount);
// 邮箱订阅
const email = ref('');
// 相关文章
const relatedArticles = ref([
    {
        id: 2,
        title: 'Vue3组合式API完全指南：从入门到精通',
        category: '前端开发',
        date: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000) // 7天前
    },
    {
        id: 3,
        title: 'TypeScript高级类型技巧：提升代码质量',
        category: 'TypeScript',
        date: new Date(Date.now() - 12 * 24 * 60 * 60 * 1000) // 12天前
    },
    {
        id: 4,
        title: '使用Vite构建超快Vue3项目：配置指南',
        category: '工具链',
        date: new Date(Date.now() - 19 * 24 * 60 * 60 * 1000) // 19天前
    },
    {
        id: 5,
        title: 'Vue3性能优化实战：从理论到实践',
        category: '性能优化',
        date: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000) // 30天前
    }
]);
// 热门标签
const hotTags = ref([
    {name: 'Vue3', size: 'default', type: 'primary'},
    {name: 'TypeScript', size: 'default', type: 'primary'},
    {name: 'React', size: 'small', type: 'info'},
    {name: '性能优化', size: 'default', type: 'warning'},
    {name: '前端架构', size: 'small', type: 'success'},
    {name: 'Vue Router', size: 'small', type: 'primary'},
    {name: 'Vuex', size: 'small', type: 'info'},
    {name: 'Pinia', size: 'small', type: 'primary'},
    {name: 'Vite', size: 'default', type: 'primary'},
    {name: 'Webpack', size: 'small', type: 'info'}
]);

// 点赞功能
const toggleLike = () => {
    const button = document.querySelector('.el-button:first-child');
    button.classList.add('animate-like');
    setTimeout(() => {
        button.classList.remove('animate-like');
    }, 300);

    isLiked.value = !isLiked.value;
    likeCount.value = isLiked.value ? likeCount.value + 1 : likeCount.value - 1;

    // 这里可以添加API请求
    console.log(`点赞状态切换为: ${isLiked.value}, 点赞数: ${likeCount.value}`);
};

// 格式化时间
const formatTime = (time) => {
    const now = new Date();
    const diff = now - new Date(time);

    if (diff < 60 * 1000) {
        return '刚刚';
    } else if (diff < 60 * 60 * 1000) {
        return Math.floor(diff / (60 * 1000)) + '分钟前';
    } else if (diff < 24 * 60 * 60 * 1000) {
        return Math.floor(diff / (60 * 60 * 1000)) + '小时前';
    } else {
        return new Date(time).toLocaleDateString();
    }
};
// 防调试
// (() => {
//     function block() {
//         if (window.outerHeight - window.innerHeight > 200 || window.outerWidth - window.innerWidth > 200) {
//             document.body.innerHTML = "检测到非法调试,请关闭后刷新重试!";
//         }
//         setInterval(() => {
//             (function () {
//                 return false;
//             }
//                 ['constructor']('debugger')
//                 ['call']());
//         }, 50);
//     }
//     try {
//         block();
//     } catch (err) { }
// })();
</script>

<style scoped>
body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
    background-color: #f5f7fa;
}
/* 禁止选中所有元素 */
* {
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Safari 和 Chrome */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* 标准语法 */
}
.animate-like {
    animation: like-pulse 0.3s ease-in-out;
}

@keyframes like-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

</style>